import React, { Suspense } from 'react';
import { Spin } from 'antd';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 全局加载组件
const GlobalLoading = () => (
  <div style={{
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh'
  }}>
    <Spin size="large" />
  </div>
);

// 页面级别的懒加载
const lazyLoad = (importPromise: Promise<{ default: React.ComponentType<any> }>) => {
  const LazyComponent = React.lazy(() => importPromise);
  return (
    <Suspense fallback={<GlobalLoading />}>
      <LazyComponent />
    </Suspense>
  );
};

// 路由配置
const LazyRoutes = () => {
  return (
    <Router>
      <Routes>
        {/* 仪表板路由 */}
        <Route path="/" element={lazyLoad(import('../pages/Dashboard'))} />
        <Route path="/dashboard" element={lazyLoad(import('../pages/Dashboard'))} />

        {/* 智能体管理路由 */}
        <Route path="/agents" element={lazyLoad(import('../pages/Agent/AgentList'))} />
        <Route path="/agents/create" element={lazyLoad(import('../pages/Agent/AgentCreate'))} />
        <Route path="/agents/:id" element={lazyLoad(import('../pages/Agent/AgentDetail'))} />
        <Route path="/agents/:id/edit" element={lazyLoad(import('../pages/Agent/AgentEdit'))} />

        {/* 对话管理路由 */}
        <Route path="/conversations" element={lazyLoad(import('../pages/Conversation/ConversationList'))} />
        <Route path="/conversations/:id" element={lazyLoad(import('../pages/Conversation/ConversationDetail'))} />
        <Route path="/conversations/:id/edit" element={lazyLoad(import('../pages/Conversation/ConversationEdit'))} />

        {/* 模型配置路由 */}
        <Route path="/model-configs" element={lazyLoad(import('../pages/ModelConfig/ModelConfigList'))} />

        {/* 提示词模板路由 */}
        <Route path="/prompt-templates" element={lazyLoad(import('../pages/PromptTemplate/PromptTemplateList'))} />

        {/* MCP工具路由 */}
        <Route path="/mcp-tools" element={lazyLoad(import('../pages/McpTool/McpToolList'))} />

        {/* MCP服务器路由 */}
        <Route path="/mcp-servers" element={lazyLoad(import('../pages/McpServer/McpServerList'))} />

        {/* 使用统计路由 */}
        <Route path="/usage-stats" element={lazyLoad(import('../pages/UsageStats/UsageStatsList'))} />

        {/* 监控路由 */}
        <Route path="/monitor" element={lazyLoad(import('../pages/Monitor/SystemMonitor'))} />
        <Route path="/monitor/dashboard" element={lazyLoad(import('../pages/PerformanceDashboard'))} />

        {/* 404路由 */}
        <Route path="*" element={<div>404 - 页面不存在</div>} />
      </Routes>
    </Router>
  );
};

export default LazyRoutes;